<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>南宁二中2025级37班 - 班级优化大师</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        :root {
            --primary: #1e88e5;
            --secondary: #64b5f6;
            --accent1: #e53935;
            --accent2: #43a047;
            --accent3: #fdd835;
            --accent4: #8e24aa;
            --dark: #2d3436;
            --light: #f5f6fa;
        }
        
        body {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            color: var(--dark);
            line-height: 1.6;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 0;
        }
        
        /* 动态背景元素 */
        .bg-shapes {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        
        .shape {
            position: absolute;
            opacity: 0.1;
            border-radius: 50%;
            animation: float 15s infinite ease-in-out;
        }
        
        .shape:nth-child(1) {
            width: 80px;
            height: 80px;
            background: var(--accent1);
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }
        
        .shape:nth-child(2) {
            width: 120px;
            height: 120px;
            background: var(--accent2);
            top: 70%;
            left: 80%;
            animation-delay: 3s;
        }
        
        .shape:nth-child(3) {
            width: 60px;
            height: 60px;
            background: var(--accent3);
            top: 40%;
            left: 85%;
            animation-delay: 6s;
        }
        
        .shape:nth-child(4) {
            width: 100px;
            height: 100px;
            background: var(--primary);
            top: 80%;
            left: 15%;
            animation-delay: 9s;
        }
        
        .shape:nth-child(5) {
            width: 70px;
            height: 70px;
            background: var(--secondary);
            top: 20%;
            left: 70%;
            animation-delay: 12s;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            33% {
                transform: translateY(-20px) rotate(120deg);
            }
            66% {
                transform: translateY(10px) rotate(240deg);
            }
        }
        
        /* 多彩导航栏样式 */
        header {
            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent1), var(--accent2));
            background-size: 400% 400%;
            animation: gradientShift 10s ease infinite;
            color: white;
            padding: 1rem 0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .logo i {
            font-size: 2rem;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 1.5rem;
            position: relative;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            padding: 0.5rem 1rem;
            border-radius: 30px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .nav-links a:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
        
        .nav-links a i {
            font-size: 1.1rem;
        }
        
        .user-actions {
            display: flex;
            gap: 1rem;
        }
        
        .btn-auth {
            padding: 0.6rem 1.2rem;
            border-radius: 30px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .btn-login {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .btn-auth:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        /* 主页横幅 */
        .hero {
            text-align: center;
            padding: 5rem 0;
            margin-bottom: 3rem;
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(30, 136, 229, 0.9), rgba(100, 181, 246, 0.9));
            color: white;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .hero::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="white" stroke-width="2" opacity="0.1"/><rect x="30" y="30" width="40" height="40" fill="none" stroke="white" stroke-width="2" opacity="0.1"/></svg>');
            z-index: 1;
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .hero p {
            font-size: 1.3rem;
            max-width: 700px;
            margin: 0 auto 2rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        .hero-btns {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }
        
        .btn-hero {
            padding: 1rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            display: flex;
            align-items: center;
            gap: 0.7rem;
        }
        
        .btn-primary {
            background: white;
            color: var(--primary);
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.5);
        }
        
        .btn-hero:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        /* 功能区网格 */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }
        
        .feature-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.4s;
            text-align: center;
            padding: 2.5rem 1.5rem;
            cursor: pointer;
            position: relative;
            border-top: 5px solid;
            backdrop-filter: blur(10px);
        }
        
        .feature-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--card-color), var(--card-color-light));
        }
        
        .feature-card:hover {
            transform: translateY(-15px) scale(1.03);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        .feature-icon {
            font-size: 4.5rem;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, var(--card-color), var(--card-color-light));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .feature-card h3 {
            font-size: 1.6rem;
            margin-bottom: 1rem;
            color: var(--card-color);
        }
        
        .feature-card p {
            color: #666;
            margin-bottom: 1.5rem;
            font-size: 1.05rem;
        }
        
        /* 不同卡片的颜色定义 */
        .student-card {
            --card-color: var(--primary);
            --card-color-light: var(--secondary);
        }
        
        .group-card {
            --card-color: var(--accent2);
            --card-color-light: #55efc4;
        }
        
        .leaderboard-card {
            --card-color: var(--accent4);
            --card-color-light: #ce93d8;
        }
        
        .management-card {
            --card-color: var(--accent1);
            --card-color-light: #ff9ff3;
        }
        
        .btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
            background: linear-gradient(135deg, var(--card-color), var(--card-color-light));
            color: white;
        }
        
        .btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* 班级统计 */
        .class-stats {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 2rem;
            margin: 3rem 0;
        }
        
        .stat-item {
            text-align: center;
            padding: 1.5rem;
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: bold;
            color: var(--primary);
            display: block;
        }
        
        .stat-label {
            font-size: 1.1rem;
            color: var(--dark);
        }
        
        /* 登录模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }
        
        .modal.active {
            display: flex;
            animation: fadeIn 0.3s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal-content {
            background: white;
            border-radius: 20px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.4s;
        }
        
        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .modal-header {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 20px 20px 0 0;
        }
        
        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .close-modal {
            background: none;
            border: none;
            font-size: 1.8rem;
            cursor: pointer;
            color: white;
            transition: transform 0.3s;
        }
        
        .close-modal:hover {
            transform: rotate(90deg);
        }
        
        .modal-body {
            padding: 2rem;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #555;
        }
        
        .form-group input {
            width: 100%;
            padding: 1rem;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s;
        }
        
        .form-group input:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.2);
        }
        
        .form-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .remember-me {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .btn-modal {
            padding: 1rem 2rem;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            width: 100%;
            font-size: 1.1rem;
        }
        
        .btn-modal-primary {
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            color: white;
        }
        
        .btn-modal-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(30, 136, 229, 0.4);
        }
        
        /* 页脚样式 */
        footer {
            background: linear-gradient(90deg, var(--dark), #3d3d3d);
            color: white;
            text-align: center;
            padding: 2.5rem 0;
            margin-top: 3rem;
            border-radius: 20px 20px 0 0;
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 2rem;
            margin-bottom: 2rem;
        }
        
        .footer-section {
            flex: 1;
            min-width: 200px;
        }
        
        .footer-section h3 {
            margin-bottom: 1.5rem;
            font-size: 1.3rem;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 0.8rem;
        }
        
        .footer-links a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: white;
        }
        
        .copyright {
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            color: #aaa;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 1rem;
            }
            
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .nav-links li {
                margin: 0.5rem;
            }
            
            .user-actions {
                margin-top: 1rem;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero p {
                font-size: 1.1rem;
            }
            
            .hero-btns {
                flex-direction: column;
                align-items: center;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .class-stats {
                flex-direction: column;
                gap: 1rem;
            }
            
            .footer-content {
                flex-direction: column;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- 动态背景元素 -->
    <div class="bg-shapes">
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
    </div>

    <!-- 导航栏 -->
    <header>
        <div class="container">
            <nav class="navbar">
                <div class="logo">
                    <i class="fas fa-school"></i>
                    <span>南宁二中2025级37班</span>
                </div>
                <ul class="nav-links">
                    <li><a href="index.html"><i class="fas fa-home"></i> 首页</a></li>
                    <li><a href="student_management.html"><i class="fas fa-user-graduate"></i> 学生管理</a></li>
                    <li><a href="group_management.html"><i class="fas fa-users"></i> 小组管理</a></li>
                    <li><a href="leaderboard.html"><i class="fas fa-trophy"></i> 排行榜</a></li>
                </ul>
                <div class="user-actions">
                    <button class="btn-auth btn-login" id="login-btn">
                        <i class="fas fa-sign-in-alt"></i> 教师登录
                    </button>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container">
        <!-- 主页横幅 -->
        <section class="hero">
            <div class="hero-content">
                <h1>欢迎来到南宁二中2025级37班</h1>
                <p>班级优化大师 - 管理班级学生分数，促进学习积极性</p>
                <div class="hero-btns">
                    <button class="btn-hero btn-primary" onclick="location.href='student_management.html'">
                        <i class="fas fa-rocket"></i> 开始管理
                    </button>
                    <button class="btn-hero btn-secondary" onclick="location.href='leaderboard.html'">
                        <i class="fas fa-chart-line"></i> 查看排行榜
                    </button>
                </div>
            </div>
        </section>
        
        <!-- 班级统计 -->
        <div class="class-stats">
            <div class="stat-item">
                <span class="stat-number">45</span>
                <span class="stat-label">班级人数</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">6</span>
                <span class="stat-label">小组数量</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">1,258</span>
                <span class="stat-label">总积分</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">28</span>
                <span class="stat-label">平均分</span>
            </div>
        </div>
        
        <!-- 功能区 -->
        <section>
            <h2 style="text-align: center; margin-bottom: 2rem; color: var(--primary); font-size: 2.2rem;">班级管理功能</h2>
            <div class="features-grid">
                <div class="feature-card student-card" onclick="location.href='student_management.html'">
                    <div class="feature-icon"><i class="fas fa-user-graduate"></i></div>
                    <h3>学生管理</h3>
                    <p>查看所有学生信息，进行加减分操作，支持按姓名首字母搜索学生</p>
                    <a href="student_management.html" class="btn">进入管理</a>
                </div>
                
                <div class="feature-card group-card" onclick="location.href='group_management.html'">
                    <div class="feature-icon"><i class="fas fa-users"></i></div>
                    <h3>小组管理</h3>
                    <p>创建和管理学习小组，分配学生到不同小组，查看小组表现</p>
                    <a href="group_management.html" class="btn">进入管理</a>
                </div>
                
                <div class="feature-card leaderboard-card" onclick="location.href='leaderboard.html'">
                    <div class="feature-icon"><i class="fas fa-trophy"></i></div>
                    <h3>排行榜</h3>
                    <p>查看个人排行榜和小组排行榜，激励学生积极学习</p>
                    <a href="leaderboard.html" class="btn">查看排行</a>
                </div>
                
                <div class="feature-card management-card" onclick="location.href='student_management.html'">
                    <div class="feature-icon"><i class="fas fa-cogs"></i></div>
                    <h3>教师管理</h3>
                    <p>教师专属功能：添加/删除学生，设置加减分规则，锁定账号</p>
                    <a href="student_management.html" class="btn">进入管理</a>
                </div>
            </div>
        </section>
        
        <!-- 系统特色区域 -->
        <section class="innovation-section" style="background: white; border-radius: 20px; padding: 3rem; margin-bottom: 3rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); text-align: center;">
            <h2 style="font-size: 2.2rem; margin-bottom: 1.5rem; color: var(--primary); display: flex; align-items: center; justify-content: center; gap: 1rem;">
                <i class="fas fa-lightbulb"></i> 系统特色
            </h2>
            <p>专为班级管理设计的优化系统，提升学习积极性</p>
            
            <div class="innovation-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 2rem;">
                <div class="innovation-item" style="padding: 2rem; border-radius: 15px; background: var(--light); transition: all 0.3s;">
                    <div class="innovation-icon" style="font-size: 3rem; margin-bottom: 1rem; color: var(--primary);"><i class="fas fa-chart-line"></i></div>
                    <h3>实时分数追踪</h3>
                    <p>实时更新学生分数变化，记录每一次加减分操作</p>
                </div>
                <div class="innovation-item" style="padding: 2rem; border-radius: 15px; background: var(--light); transition: all 0.3s;">
                    <div class="innovation-icon" style="font-size: 3rem; margin-bottom: 1rem; color: var(--primary);"><i class="fas fa-users"></i></div>
                    <h3>小组协作竞争</h3>
                    <p>小组内互相帮助，小组间良性竞争，提升团队精神</p>
                </div>
                <div class="innovation-item" style="padding: 2rem; border-radius: 15px; background: var(--light); transition: all 0.3s;">
                    <div class="innovation-icon" style="font-size: 3rem; margin-bottom: 1rem; color: var(--primary);"><i class="fas fa-shield-alt"></i></div>
                    <h3>教师专属权限</h3>
                    <p>教师账号拥有完整管理权限，其他用户仅限查看</p>
                </div>
                <div class="innovation-item" style="padding: 2rem; border-radius: 15px; background: var(--light); transition: all 0.3s;">
                    <div class="innovation-icon" style="font-size: 3rem; margin-bottom: 1rem; color: var(--primary);"><i class="fas fa-mobile-alt"></i></div>
                    <h3>多设备适配</h3>
                    <p>完美适配电脑、平板和手机，随时随地管理班级</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 登录模态框 -->
    <div class="modal" id="login-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">教师登录</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="login-form">
                    <div class="form-group">
                        <label for="login-username">用户名</label>
                        <input type="text" id="login-username" placeholder="请输入教师用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="login-password">密码</label>
                        <input type="password" id="login-password" placeholder="请输入密码" required>
                    </div>
                    <div class="form-options">
                        <div class="remember-me">
                            <input type="checkbox" id="remember-me">
                            <label for="remember-me">记住我</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn-modal btn-modal-primary" id="submit-login">登录</button>
                <div class="switch-form" style="margin-top: 1.5rem; text-align: center; color: #666;">
                    注意：只有教师账号可以登录进行操作
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>关于我们</h3>
                    <p>南宁二中2025级37班班级优化系统，致力于提升班级管理效率和学习积极性。</p>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="student_management.html">学生管理</a></li>
                        <li><a href="group_management.html">小组管理</a></li>
                        <li><a href="leaderboard.html">排行榜</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p>南宁市第二中学</p>
                    <p>2025级37班</p>
                </div>
            </div>
            <div class="copyright">
                <p>© 2023 南宁二中2025级37班 - 班级优化大师 | 所有权利保留</p>
            </div>
        </div>
    </footer>

    <script>
        // 南宁二中2025级37班 - 班级优化大师
        const API_BASE_URL = 'http://localhost:5000';
        
        console.log('班级优化大师系统初始化...');

        // 模态框控制
        const loginModal = document.getElementById('login-modal');
        const loginBtn = document.getElementById('login-btn');
        const closeModalBtns = document.querySelectorAll('.close-modal');
        const submitLogin = document.getElementById('submit-login');

        // 打开登录模态框
        loginBtn.addEventListener('click', function() {
            loginModal.classList.add('active');
        });

        // 关闭模态框
        function closeModals() {
            loginModal.classList.remove('active');
        }

        closeModalBtns.forEach(btn => {
            btn.addEventListener('click', closeModals);
        });

        // 点击模态框外部关闭
        window.addEventListener('click', function(e) {
            if (e.target === loginModal) {
                closeModals();
            }
        });

        // 登录表单提交 - 连接后端
        submitLogin.addEventListener('click', async function() {
            const username = document.getElementById('login-username').value;
            const password = document.getElementById('login-password').value;
            
            if (!username || !password) {
                alert('请填写所有必填字段！');
                return;
            }
            
            try {
                // 显示加载状态
                submitLogin.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
                submitLogin.disabled = true;
                
                // 调用后端登录接口
                const response = await fetch(API_BASE_URL + '/api/teacher_login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    alert('🎉 登录成功！');
                    closeModals();
                    // 更新界面显示教师已登录
                    updateTeacherInterface(result.teacher);
                    
                    // 保存登录状态到本地存储
                    localStorage.setItem('teacher_logged_in', 'true');
                    localStorage.setItem('teacher_username', username);
                    
                    // 清空表单
                    document.getElementById('login-username').value = '';
                    document.getElementById('login-password').value = '';
                } else {
                    alert('登录失败: ' + result.message);
                }
            } catch (error) {
                console.error('登录错误:', error);
                // 如果后端连接失败，使用模拟登录
                simulateLogin(username, password);
            } finally {
                // 恢复按钮状态
                submitLogin.innerHTML = '登录';
                submitLogin.disabled = false;
            }
        });

        // 模拟登录函数（当后端不可用时使用）
        function simulateLogin(username, password) {
            // 模拟登录验证
            const validUsers = {
                'admin': 'password',
                'teacher': '123456',
                'demo': 'demo'
            };
            
            if (validUsers[username] && validUsers[username] === password) {
                alert('🎉 登录成功！(模拟模式)');
                closeModals();
                
                // 创建模拟教师数据
                const mockTeacher = {
                    id: 1,
                    username: username,
                    created_at: new Date().toISOString()
                };
                
                // 更新界面显示教师已登录
                updateTeacherInterface(mockTeacher);
                
                // 保存登录状态到本地存储
                localStorage.setItem('teacher_logged_in', 'true');
                localStorage.setItem('teacher_username', username);
                localStorage.setItem('teacher_data', JSON.stringify(mockTeacher));
                
                // 清空表单
                document.getElementById('login-username').value = '';
                document.getElementById('login-password').value = '';
            } else {
                alert('❌ 用户名或密码错误！\n\n可用测试账号：\n用户名: admin, 密码: password\n用户名: teacher, 密码: 123456\n用户名: demo, 密码: demo');
            }
        }

        // 更新教师界面函数
        function updateTeacherInterface(teacher) {
            document.querySelector('.user-actions').innerHTML = `
                <div class="user-info" style="display: flex; align-items: center; gap: 1rem;">
                    <img src="https://ui-avatars.com/api/?name=${encodeURIComponent(teacher.username)}&background=1e88e5&color=fff" 
                         style="width: 32px; height: 32px; border-radius: 50%; border: 2px solid white;">
                    <span style="color: white; font-weight: 500;">${teacher.username} 老师</span>
                    <button class="btn-auth btn-login" id="logout-btn" style="background: rgba(255,255,255,0.2);">
                        <i class="fas fa-sign-out-alt"></i> 退出
                    </button>
                </div>
            `;
            
            // 保存用户信息到本地存储，供其他页面使用
            localStorage.setItem('current_teacher', JSON.stringify(teacher));
            
            // 添加退出功能
            document.getElementById('logout-btn').addEventListener('click', function() {
                if (confirm('确定要退出登录吗？')) {
                    // 清除本地存储的用户信息
                    localStorage.removeItem('current_teacher');
                    localStorage.removeItem('teacher_logged_in');
                    localStorage.removeItem('teacher_username');
                    localStorage.removeItem('teacher_data');
                    
                    // 恢复登录按钮
                    document.querySelector('.user-actions').innerHTML = `
                        <button class="btn-auth btn-login" id="login-btn">
                            <i class="fas fa-sign-in-alt"></i> 教师登录
                        </button>
                    `;
                    
                    // 重新绑定事件
                    document.getElementById('login-btn').addEventListener('click', function() {
                        loginModal.classList.add('active');
                    });
                    
                    alert('已退出登录');
                }
            });
        }

        // 页面加载时检查登录状态
        window.addEventListener('load', function() {
            // 检查本地存储中是否有教师信息
            const isLoggedIn = localStorage.getItem('teacher_logged_in');
            const savedTeacher = localStorage.getItem('current_teacher');
            
            if (isLoggedIn === 'true' && savedTeacher) {
                try {
                    const teacher = JSON.parse(savedTeacher);
                    updateTeacherInterface(teacher);
                    console.log('自动登录教师:', teacher.username);
                } catch (e) {
                    console.error('读取教师信息失败:', e);
                    localStorage.removeItem('current_teacher');
                    localStorage.removeItem('teacher_logged_in');
                    localStorage.removeItem('teacher_username');
                }
            } else if (isLoggedIn === 'true') {
                // 如果只有登录状态但没有教师数据，创建模拟数据
                const username = localStorage.getItem('teacher_username') || '教师';
                const mockTeacher = {
                    id: 1,
                    username: username,
                    created_at: new Date().toISOString()
                };
                updateTeacherInterface(mockTeacher);
            }
            
            // 测试后端连接
            testBackendConnection();
        });

        // 测试后端连接
        async function testBackendConnection() {
            try {
                const response = await fetch(API_BASE_URL + '/');
                const data = await response.json();
                console.log('✅ 后端连接正常:', data.message);
                
                // 在页面显示连接状态
                showConnectionStatus('✅ 后端连接正常', 'success');
            } catch (error) {
                console.error('❌ 后端连接失败:', error);
                showConnectionStatus('❌ 后端连接失败 - 使用模拟模式', 'warning');
            }
        }

        // 显示连接状态
        function showConnectionStatus(message, type) {
            // 移除已有的状态提示
            const existingStatus = document.getElementById('connection-status');
            if (existingStatus) {
                existingStatus.remove();
            }
            
            // 创建状态提示元素
            const statusEl = document.createElement('div');
            statusEl.id = 'connection-status';
            statusEl.innerHTML = `
                <div style="
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    padding: 10px 15px;
                    border-radius: 8px;
                    background: ${type === 'success' ? '#4CAF50' : type === 'warning' ? '#FF9800' : '#f44336'};
                    color: white;
                    font-size: 14px;
                    z-index: 1000;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
                ">
                    <i class="fas ${type === 'success' ? 'fa-check' : type === 'warning' ? 'fa-exclamation-triangle' : 'fa-exclamation-circle'}"></i>
                    ${message}
                </div>
            `;
            
            document.body.appendChild(statusEl);
            
            // 5秒后自动消失
            setTimeout(() => {
                if (statusEl.parentNode) {
                    statusEl.remove();
                }
            }, 5000);
        }

        // 导航栏激活状态
        const currentPage = window.location.pathname.split("/").pop();
        document.querySelectorAll('.nav-links a').forEach(link => {
            if (link.getAttribute('href') === currentPage) {
                link.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
            }
        });

        // 卡片悬停动画增强
        document.querySelectorAll('.feature-card').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-15px) scale(1.03)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1)';
            });
        });
    </script>
</body>
</html>